<template>
  <el-input v-model="stationTreeState.filterText" placeholder="按名称进行搜索" clearable />
  <el-tree v-loading="loading" element-loading-text="拼命加载中..." class="filter-tree" :class="{ 'filter-tree-dialog': props.isDialog }" ref="treeRef"
           node-key="id" :default-expand-all="props.defaultExpandAll" :props="stationTreeState.defaultProps" :data="stationTreeState.treeData"
           :highlight-current="stationTreeState.highlightCurrentData" :filter-node-method="stationTreeState.filterNode" :expand-on-click-node="false"
           :default-expanded-keys="[stationTreeState.rootId]" @node-click="stationTreeState.handleNodeClick">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span :title="node.label" class="label">
          <jxtech-svg-icon :icon="'#icon-File'" :size="16" class="pointer" v-if="data.id.indexOf('info-') == -1"></jxtech-svg-icon>
          <img v-else-if="
              data.institutionCode == 'popohp10' ||
              data.institutionCode == 'popohp11' ||
              data.institutionCode == 'popohp12' ||
              data.institutionCode == 'popohp13'
            " :src="SDZ16_IMG" width="14" />
          <img v-else-if="data.institutionCode == 'poposp30'" :src="GF16_IMG" width="14" />
          <img v-else-if="
              data.institutionCode == 'popotp40' ||
              data.institutionCode == 'popotp41' ||
              data.institutionCode == 'popotp42'
            " :src="HD16_IMG" width="14" />
          <img v-else-if="data.institutionCode == 'popowp21'" :src="LSFD16_IMG" width="14" />

          <img v-else-if="data.institutionCode == 'popowp22'" :src="HSFD16_IMG" width="14" />

          <!-- <i class="fa fa-folder" style="color: #f2e07d" v-else></i> -->
          {{ node.label }}
        </span>
      </span>
    </template>
  </el-tree>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue"
import { composeTree } from "/@/utils/common"
import powerStationTypeApi from "/@/api/base/bean/power-station-type"
import floder from "../images/floder.png"
import SDZ16_IMG from "../images/SDZ16.png"
import GF16_IMG from "../images/GF16.png"
import HD16_IMG from "../images/HD16.png"
import HSFD16_IMG from "../images/HSFD16.png"
import LSFD16_IMG from "../images/LSFD16.png"
let treeRef = ref()
const props = defineProps({
  isDialog: {
    type: Boolean,
    default: false
  },
  //是否默认选中电站x
  defaultSelectStation: {
    type: Boolean,
    default: false
  },
  defaultExpandAll: {
    type: Boolean,
    default: true
  },
  highlightCurrent: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits<{
  (e: "handleNodeClick", data: any, node: any, tree: any): void
}>()
const loading = ref(false)
const stationTreeState = reactive({
  filterText: "",
  defaultProps: {
    children: "children",
    label: "powerType"
  },
  rootId: "",
  treeData: [],
  resultData: [],
  highlightCurrentData: props.highlightCurrent,
  filterNode(value: any, data: any) {
    if (!value) return true
    return data.powerType.indexOf(value) !== -1
  },
  handleNodeClick(data: any, node?: any, tree?: any) {
    if (!props.highlightCurrent) {
      if (data.id.indexOf("info-") != -1) {
        stationTreeState.highlightCurrentData = true
      } else {
        stationTreeState.highlightCurrentData = false
      }
    }
    if (props.isDialog) {
      // _self.lydata
      //   .callback(JSON.parse(JSON.stringify(data)), node, tree)
      //   .then(() => {
      //     _self.closeDialog();
      //   });
    } else {
      emit("handleNodeClick", JSON.parse(JSON.stringify(data)), node, tree)
    }
  },
  chooseRoot() {
    const _self = this
    let selectNode: any = null
    if (props.defaultSelectStation) {
      selectNode = stationTreeState.getFirstStation()
    } else {
      selectNode = stationTreeState.treeData[0]
    }
    _self.rootId = selectNode.id
    treeRef.value.setCurrentKey(_self.rootId)
    stationTreeState.handleNodeClick(selectNode)
  },
  getFirstStation() {
    for (let i = 0; i < stationTreeState.resultData.length; i++) {
      if ((stationTreeState.resultData[i] as any).id.indexOf("info-") != -1) {
        return stationTreeState.resultData[i]
      }
    }
  },
  initTreeData(isChooseRoot: boolean) {
    powerStationTypeApi
      .treeList()
      .then((res: any) => {
        stationTreeState.resultData = res.data
        //将结果转换为tree结构
        stationTreeState.treeData = composeTree(
          res.data,
          "powerTypeCode",
          "parentCode"
        )
        if (isChooseRoot) {
          stationTreeState.chooseRoot()
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
})

watch(
  () => stationTreeState.filterText,
  (val: any) => {
    treeRef.value.filter(val)
  }
)
onMounted(() => {
  stationTreeState.initTreeData(true)
})
</script>